列表渲染
列表渲染
Vue3 提供了一种更简洁、更高效的方式来实现列表渲染。在 Vue3 中,我们可以使用 v-for 指令来遍历数组或对象,并根据每个元素生成相应的 DOM 元素
列表渲染(v-for)的使用
在 Vue 3 中,你可以使用 <script setup>
语法来实现列表渲染。下面通过代码案例详细解释如何使用 <script setup>
实现列表渲染,并提出注意事项。
示例
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Orange" },
]);
// 注意事项:在 <script setup> 内部定义的变量和函数,需要在模板中使用才会生效
</script>
在上述示例中,我们使用了 <script setup>
将相关的变量和逻辑封装到一个块中。在块内部,我们使用 ref
函数创建了一个名为 items
的数组变量,其中包含了三个对象。然后,我们使用 v-for
指令将数组中的每个对象渲染为一个 <li>
元素,并使用 :key
属性为每个元素提供唯一的标识。
注意事项
- 在
<script setup>
内部定义的变量和函数必须在模板中使用才会生效,否则它们会被自动清除掉。 - 通过
<script setup>
方式定义的变量和函数是局部变量,不会被暴露到模板之外的作用域中。 - 当使用
<script setup>
时,不能直接在模板中访问全局变量或组件实例,需要通过context.attrs
或context.slots
来访问。
v-for 与 v-if 配合时的注意事项
当 v-for 和 v-if 同时存在于一个节点上时,v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。
为了解决这个问题,你可以在外部再包装一层 <template>
,然后在该 <template>
上使用 v-for,在内部的元素上使用 v-if 条件。这样可以确保 v-if 条件能够访问到 v-for 的作用域,并且代码也更加明显易读。
<template>
<template v-for="item in items">
<li v-if="!item.visible">{{ item.name }}</li>
</template>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ id: 1, name: "Apple", visible: true },
{ id: 2, name: "Banana", visible: false },
{ id: 3, name: "Orange", visible: true },
]);
// 注意事项:在 <script setup> 内部定义的变量和函数,需要在模板中使用才会生效
</script>
在上述示例中,虽然数组 items
中的第二个元素的 visible
属性为 false
,但由于 v-for
的优先级更高,所以该元素仍然会被渲染到列表中。如果想要根据条件来过滤列表,请将 v-for
和 v-if
放在不同的元素上。
v-for 中的 key 的原理
为了高效地更新和重用列表中的元素,Vue 要求为每个列表项提供一个唯一的 key
属性。通过 key
,Vue 可以追踪列表中元素的身份,并在改变列表时,尽可能地复用已有的 DOM 元素。
响应式数组的变更方法
Vue 能够侦听响应式数组的变更方法,并在它们被调用时触发相关的更新。这些变更方法包括:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
示例
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
</ul>
<button @click="addItem">Add Item</button>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Orange" },
]);
function addItem() {
items.value.push({ id: items.value.length + 1, name: "New Item" });
}
// 注意事项:在 <script setup> 内部定义的变量和函数,需要在模板中使用才会生效
</script>
在上述示例中,通过 addItem
方法向 items
数组中添加新的对象。由于 Vue 3 可以侦听到 push
方法的变更,这样做将自动触发界面的重新渲染,显示新的列表项。